<template>
  <div class="container">
    <!-- 回到顶部
    <div class="toTop">
      <img src="../../../static/img/home/arrow_go_to_top.png" alt="">
    </div> -->
    <div class="banner">
      <div class="search">
        <h1>车宜拍</h1>
        <h3>专业二手车线上拍卖平台</h3>
        <div class="searchFrom">
          <div>
            <input type="text" placeholder="请输入您想购买的品牌车型" v-model="inputVal"  class="tex">
            <router-link class="btn" :to="{path:'/buyCar', name: '/buyCar', params: { inputVals: inputVal }}" tag="div">
              <a href="#">立即搜索</a>
            </router-link>
          </div>
          <router-link class="buyCar" :to="{path:'/sellingCar'}" tag="div">
              <a href="#">我要卖车</a>
          </router-link>
        </div>
      </div>
    </div>
    <div class="content">
      <!-- 最新车辆 -->
      <div class="newest" v-if="newListLength > 0">
        <div class="tetle">
          <h3>最新车辆</h3>
          <router-link :to="{path:'/buyCar'}" tag="p">
            查看更多
            <img src="../../../static/img/home/home_right_arrow.png" alt="">
          </router-link>
        </div>
        <div class="list">
          <div class="synopsis" @click="toPath(item)" v-for="(item, val) in newList.content" :key="item.id" v-if="val < 4">
            <!-- <router-link :to="{path:'/buyCar'}" tag="p"> -->
              <div class="photo" v-bind:style="{
                'background': 'url(' + 'http://cheyipai.ucarcloud.cn/auctionCarFile/' + item.car_main_pic + ') no-repeat center center',
                'backgroundSize': '100% auto'
              }">
                <img v-if="item.status == 0" class="label" src="../../../static/img/home/home_bidding.png" alt="">
                <img v-if="item.status == 7" class="label" src="../../../static/img/home/home_wait_for_bid.png" alt="">
                <img v-if="item.status == 2" class="label" src="../../../static/img/home/home_auctioning.png" alt="">
                <img v-if="item.status == 5" class="label" src="../../../static/img/home/home_wait_for_auction.png" alt="">
                <div class="collect" @click="solicitudeFn(item, $event, '1')">
                  <img v-if="item.focus == 0" src="../../../static/img/home/btn_guanzhu_nor.png" alt="">
                  <img v-if="item.focus == 1" src="../../../static/img/home/btn_guanzhu_sel.png" alt="">
                </div>
                <!-- <img class="bg" :src="'http://cheyipai.ucarcloud.cn/auctionCarFile/' + item.car_main_pic" alt=""> -->
                <div class="license">
                  【{{item.storage}}】{{item.plate_number}}
                </div>
              </div>
              <p class="brand wm">
                {{item.car_style}}
              </p>
              <p class="travel wm">{{item.mileage}}万公里|{{item.register_date}}上牌</p>
              <div class="auction wm">
                <p class="numberOfPeople" v-if="item.status == 0 || item.status == 7">
                  <span class="num">{{item.tenderPersonNumbers?item.tenderPersonNumbers:0}}</span>
                  <span>人出价</span>
                </p>
                <p class="numberOfPeople" v-if="item.status == 2 || item.status == 5">
                  <span class="num">{{item.auction_price?item.auction_price:0}}</span>
                  <span>万元起</span>
                </p>
                <p class="startTime">
                  <span class="tim">{{item.start_time.substring(0,16)}}</span>
                  <span>开始</span>
                </p>
              </div>
            <!-- </router-link> -->
          </div>
        </div>
      </div>
      <div class="newest" v-else>
        <div class="tetle">
          <h3>最新车辆</h3>
          <router-link :to="{path:'/buyCar'}" tag="p">
            查看更多
            <img src="../../../static/img/home/home_right_arrow.png" alt="">
          </router-link>
        </div>
        <div class="list">
          <div class="synopsis1">
            <img src="../../../static/img/home_nodata.png" alt="">
          </div>
        </div>
      </div>
      <!-- 正在投标 -->
      <div class="newest" v-if="bidListLength > 0">
        <div class="tetle">
          <h3>正在投标</h3>
          <router-link :to="{path:'/buyCar'}" tag="p">
            查看更多
            <img src="../../../static/img/home/home_right_arrow.png" alt="">
          </router-link>
        </div>
        <div class="list">
          <div class="synopsis" @click="toPath(item)" v-for="(item, val) in bidList.content" :key="item.id" v-if="val < 4">
            <div class="photo" v-bind:style="{
                'background': 'url(' + 'http://cheyipai.ucarcloud.cn/auctionCarFile/' + item.car_main_pic + ') no-repeat center center',
                'backgroundSize': '100% auto'
            }">
              <img v-if="item.status == 0" class="label" src="../../../static/img/home/home_bidding.png" alt="">
              <img v-if="item.status == 7" class="label" src="../../../static/img/home/home_wait_for_bid.png" alt="">
              <img v-if="item.status == 2" class="label" src="../../../static/img/home/home_auctioning.png" alt="">
              <img v-if="item.status == 5" class="label" src="../../../static/img/home/home_wait_for_auction.png" alt="">
              <div class="collect" @click="solicitudeFn(item, $event, '2')">
                <img v-if="item.focus == 0" src="../../../static/img/home/btn_guanzhu_nor.png" alt="">
                <img v-if="item.focus == 1" src="../../../static/img/home/btn_guanzhu_sel.png" alt="">
              </div>
              <!-- <img class="bg" :src="'http://cheyipai.ucarcloud.cn/auctionCarFile/' + item.car_main_pic" alt=""> -->
              <div class="license">
                【{{item.storage}}】{{item.plate_number}}
              </div>
            </div>
            <p class="brand wm">
              {{item.car_style}}
            </p>
            <p class="travel wm">{{item.mileage}}万公里|2014年06月上牌</p>
            <div class="auction wm">
              <p class="numberOfPeople" v-if="item.status == 0 || item.status == 7">
                <span class="num">{{item.tenderPersonNumbers?item.tenderPersonNumbers:0}}</span>
                <span>人出价</span>
              </p>
              <p class="numberOfPeople" v-if="item.status == 2 || item.status == 5">
                <span class="num">{{item.auction_price?item.auction_price:0}}</span>
                <span>万元起</span>
              </p>
              <p class="startTime">
                <span class="tim">{{item.start_time.substring(0,16)}}</span>
                <span>开始</span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="newest" v-else>
        <div class="tetle">
          <h3>最新车辆</h3>
          <router-link :to="{path:'/buyCar'}" tag="p">
            查看更多
            <img src="../../../static/img/home/home_right_arrow.png" alt="">
          </router-link>
        </div>
        <div class="list">
          <div class="synopsis1">
            <img src="../../../static/img/home_nodata.png" alt="">
          </div>
        </div>
      </div>
      <!-- 正在竞拍 -->
      <div class="newest" v-if="biddersListLength > 0">
        <div class="tetle">
          <h3>正在竞拍</h3>
          <router-link :to="{path:'/buyCar'}" tag="p">
            查看更多
            <img src="../../../static/img/home/home_right_arrow.png" alt="">
          </router-link>
        </div>
        <div class="list">
          <div class="synopsis" @click="toPath(item)" v-for="(item, val) in biddersList.content" :key="item.id" v-if="val < 4">
            <div class="photo" v-bind:style="{
                'background': 'url(' + 'http://cheyipai.ucarcloud.cn/auctionCarFile/' + item.car_main_pic + ') no-repeat center center',
                'backgroundSize': '100% auto'
            }">
              <img v-if="item.status == 0" class="label" src="../../../static/img/home/home_bidding.png" alt="">
              <img v-if="item.status == 7" class="label" src="../../../static/img/home/home_wait_for_bid.png" alt="">
              <img v-if="item.status == 2" class="label" src="../../../static/img/home/home_auctioning.png" alt="">
              <img v-if="item.status == 5" class="label" src="../../../static/img/home/home_wait_for_auction.png" alt="">
              <div class="collect" @click="solicitudeFn(item, $event, '3')">
                <img v-if="item.focus == 0" src="../../../static/img/home/btn_guanzhu_nor.png" alt="">
                <img v-if="item.focus == 1" src="../../../static/img/home/btn_guanzhu_sel.png" alt="">
            </div>
              <!-- <img class="bg" :src="'http://cheyipai.ucarcloud.cn/auctionCarFile/' + item.car_main_pic" alt=""> -->
              <div class="license">
                【{{item.storage}}】{{item.plate_number}}
              </div>
            </div>
            <p class="brand wm">
              {{item.car_style}}
            </p>
            <p class="travel wm">{{item.mileage}}万公里|2014年06月上牌</p>
            <div class="auction wm">
              <p class="numberOfPeople" v-if="item.status == 0 || item.status == 7">
                <span class="num">{{item.tenderPersonNumbers?item.tenderPersonNumbers:0}}</span>
                <span>人出价</span>
              </p>
              <p class="numberOfPeople" v-if="item.status == 2 || item.status == 5">
                <span class="num">{{item.auction_price?item.auction_price:0}}</span>
                <span>万元起</span>
              </p>
              <p class="startTime">
                <span class="tim">{{item.start_time.substring(0,16)}}</span>
                <span>开始</span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="newest" v-else>
        <div class="tetle">
          <h3>最新车辆</h3>
          <router-link :to="{path:'/buyCar'}" tag="p">
            查看更多
            <img src="../../../static/img/home/home_right_arrow.png" alt="">
          </router-link>
        </div>
        <div class="list">
          <div class="synopsis1">
            <img src="../../../static/img/home_nodata.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data: () => {
    return {
      newList: {},
      bidList: {},
      biddersList: {},
      inputVal: '',
      newListLength: '',
      userLis: '',
      ifSolicitudeFn: true,
      bidListLength: '',
      biddersListLength: '',
      parameter: {
        type: '',
        state: '',
        index: '1',
        pageSize: '4',
        query: '',
        userId: ''
      },
      parameter1: {
        type: '0',
        state: '1',
        index: '1',
        pageSize: '4',
        query: '',
        userId: ''
      },
      parameter2: {
        type: '1',
        state: '1',
        index: '1',
        pageSize: '4',
        query: '',
        userId: ''
      }
    }
  },
  created () {
    window.scrollTo(0, 0)
    // 读取本地
    let storage = window.sessionStorage
    let json = storage.getItem('WSKuserLis')
    let jsonObj = JSON.parse(json)
    if (jsonObj) {
      this.parameter.userId = jsonObj.data.data.user.id
      this.parameter1.userId = jsonObj.data.data.user.id
      this.parameter2.userId = jsonObj.data.data.user.id
      this.userLis = jsonObj.data.data.user
    }
  },
  mounted () {
    this.getData()
    this.getData1()
    this.getData2()
  },
  methods: {
    // 添加关注
    solicitudeFn (x, eve, i) {
      if (x.focus === '0') {
        this.ifSolicitudeFn = true
      } else {
        this.ifSolicitudeFn = false
      }
      // 阻止时间冒泡
      eve.cancelBubble = true
      // 获取当前URL
      let urls = window.location.href
      // 判断是否登陆
      if (this.userLis.id && this.userLis.id !== '') {
        let httpUrl = ''
        if (this.ifSolicitudeFn) {
          httpUrl = 'http://paimai.ucarcloud.cn/auctionCarCore/userFoucus/addFoucus'
        } else {
          httpUrl = 'http://paimai.ucarcloud.cn/auctionCarCore/userFoucus/unsubscribe'
        }
        let _this = this
        // 读取本地
        let storage = window.sessionStorage
        let json = storage.getItem('WSKuserLis')
        let jsonObj = JSON.parse(json)
        if (jsonObj) {
          this.userLis = jsonObj.data.data.user
        }
        this.$http({
          url: httpUrl,
          params: {
            userId: this.userLis.id,
            carId: x.id
          },
          headers: {'from': 'web'}
        }).then(r => {
          _this.getData()
          _this.getData1()
          _this.getData2()
          if (i === '1') {
            _this.getData()
          } else if (i === '2') {
            _this.getData1()
          } else if (i === '3') {
            _this.getData2()
          }
          // _this.ifSolicitudeFn = !_this.ifSolicitudeFn
        })
      } else {
        // 把当前url保存到本地
        let use = JSON.stringify(urls)
        let storage = window.sessionStorage
        storage.setItem('WSKpathHerf', use)
        // 未登录   跳转到登陆页
        this.$router.push({path: '/login'})
      }
    },
    getData () {
      this.$http({
        url: 'http://paimai.ucarcloud.cn/auctionCarCore/web/searchResult?x=' + new Date().getTime(),
        params: this.parameter,
        headers: {'from': 'web'}
      }).then(r => {
        console.log(r.data)
        this.newList = r.data.data
        this.newListLength = r.data.data.content.length
      })
    },
    toPath (x) {
      this.$router.push({path: '/buyCar/DetailsPage', name: '/buyCar/DetailsPage', query: x})
    },
    getData1 () {
      this.$http({
        url: 'http://paimai.ucarcloud.cn/auctionCarCore/web/searchResult?x=' + new Date().getTime(),
        params: this.parameter1,
        headers: {'from': 'web'}
      }).then(r => {
        this.bidList = r.data.data
        this.bidListLength = r.data.data.content.length
      })
    },
    getData2 () {
      this.$http({
        url: 'http://paimai.ucarcloud.cn/auctionCarCore/web/searchResult?x=' + new Date().getTime(),
        params: this.parameter2,
        headers: {'from': 'web'}
      }).then(r => {
        this.biddersList = r.data.data
        this.biddersListLength = r.data.data.content.length
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.container{
  width: 100%;
  // .toTop{
  //   width: 40px;
  //   height: 40px;
  //   position: fixed;
  //   bottom: 10px;
  //   right: 150px;
  //   background: #444;
  //   cursor: pointer;
  //   &:hover{
  //     background: #ff6f3c;
  //   }
  //   img{
  //     width: 22px;
  //     position: absolute;
  //     top: 50%;
  //     left: 50%;
  //     margin-top: -6px;
  //     margin-left: -12px;
  //   }
  // }
  .banner{
    width: 100%;
    height: 480px;
    background: url('../../../static/img/home/home_banner.png') no-repeat 0 0/cover;
    // background-size: 100%;
    .search{
      width: 1200px;
      margin: 0 auto;
      padding: 124px 0 108px 0;
      text-align: center;
      h1{
        color: #fff;
        font-size: 60px;
      }
      h3{
        color: #fff;
        font-size: 30px;
        margin-top: 24px;
      }
      .searchFrom{
        margin: 83px auto 0;
        // padding: 0 145px;
        overflow: hidden;
        .buyCar{
          width: 150px;
          float: left;
          margin-left: 30px;
          background: #fdc125;
          font-size: 16px;
          height: 50px;
          a{
            color: #fff;
            line-height: 50px;
            display: inline-block;
            width: 100%;
            height: 100%;
          }
        }
        div{
          float: left;
          margin-left: 145px;
          display: inline-block;
          overflow: hidden;
          input{
            float: left;
            height: 50px;
          }
          .tex{
            width: 560px;
            background: #fff;
            padding-left: 20px;
            font-size: 16px;
            color: #333;
          }
          .btn{
            width: 150px;
            float: left;
            height: 50px;
            background: #ff6f3c;
            font-size: 16px;
            margin-left: 0;
            a{
              color: #fff;
              line-height: 50px;
              display: inline-block;
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
  .content{
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 40px;
    .newest{
      margin-top: 30px;
      .tetle{
        overflow: hidden;
        h3{
          margin-left: 10px;
          font-size: 18px;
          color: #333;
          float: left;
        }
        p{
          float: right;
          font-size: 14px;
          cursor: pointer;
          img{
            margin-left: 6px;
            width: 7px;
            vertical-align: -1px;
          }
        }
      }
      .list{
        zoom:1;//为了兼容IE
        &:after{
          content:"";//设置内容为空
          height:0;//高度为0
          line-height:0;//行高为0
          display:block;//将文本转为块级元素
          visibility:hidden;//将元素隐藏
          clear:both//清除浮动
        }
        margin-top: 10px;
        .synopsis1{
          width: 282px;
          height: 305px;
        }
        .synopsis{
          padding: 10px;
          margin-bottom: 5px;
          float: left;
          height: 310px;
          cursor: pointer;
          // transform: scale(1);
          transition: box-shadow 0.5s,transform 0.5s;
          &:hover{
            box-shadow: 0px 0px 10px 3px rgba(120,120,120,0.3);
            // transform: scale(1.3);
            transition: box-shadow 0.5s,transform 0.5s;
          }
          .photo{
            width: 280px;
            height: 188px;
            position: relative;
            .bg{
              width: 100%;
              position: absolute;
            }
            .license{
              position: absolute;
              bottom: 0;
              width: 100%;
              height: 30px;
              line-height: 30px;
              background: rgba(0,0,0,.55);
              color: #fff;
              font-size: 14px;
              text-align: center;
            }
            .label{
              position: absolute;
              top: -5px;
              left: 10px;
              z-index: 1;
            }
            .collect{
              width: 24px;
              height: 25px;
              background: rgba(0,0,0,.55);
              border-radius: 50%;
              position: absolute;
              top: 6px;
              right: 6px;
              img{
                margin: 4px auto;
                display: block;
              }
            }
          }
          .wm{
            margin: 16px auto 0;
            width: 270px;
          }
          .brand{
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 16px;
            color: #333;
          }
          .travel{
            font-size: 14px;
            color: #666;
          }
          .auction{
            overflow: hidden;
            .numberOfPeople{
              float: left;
              font-size: 14px;
              .num{
                font-size: 18px;
                color: #ff6f3c;
              }
            }
            .startTime{
              float: right;
              line-height: 21px;
              font-size: 14px;
              .tim{
                color: #ff6f3c;
              }
            }
          }
        }
      }
    }
  }
}
</style>
